<template>
    <div class="player">
       <div class="normal-player" v-show="fullScreen">
           <div class="background">
               <img :src="currentSong.pic">
            </div>
            <header-title :title="currentSong.name" class="header-box" @action="action">
                <i class="icon-back"></i>
            </header-title>
            <h2 class="subtitle">{{currentSong.singer}}</h2>
            <!-- 唱片和歌词切换区域 -->
            <div class="middle">
                <div class="middle-l">
                    <div class="cd-wrapper">
                        <div class="cd">
                            <img :src="currentSong.pic" class="image" alt="">
                        </div>
                    </div>
                    <div class="playing-lyric-wrapper">
                        <div class="playing-lyric">是我错失的机会</div>
                    </div>
                </div>
                <div class="middle-r">
                    <div class="lyric-wrapper">
                        <p class="text">一路向北 (Live) - 周杰伦 (Jay Chou)</p>
                        <p class="text">词：方文山</p>
                        <p class="text">曲：周杰伦</p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <!-- 切换唱片和歌词指示条 -->
                <div class="dot-wrapper">
                    <span class="dot"></span>
                    <span class="dot active"></span>
                </div>
                <!-- 播放进度条 -->
                <div class="progress-wrapper">
                    <span class="time time-l">01:13</span>
                    <div class="progress-bar-wrapper">
                        <div class="progress-bar">
                            <div class="bar-inner">
                                <div class="progress" style="width: 50.4064px;"></div>
                                <div class="progress-btn-wrapper" style="transform: translate3d(50.4064px, 0px, 0px);">
                                    <div class="progress-btn"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="time time-r">04:57</span>
                </div>
                <!-- 控制栏 -->
                <div class="operators">
                    <div class="icon i-left">
                        <i :class="modeClass" @click="changeMode"></i>
                    </div>
                    <div class="icon i-left">
                        <i class="icon-prev" :class="iconClass" @click="prev"></i>
                    </div>
                    <div class="icon i-center">
                        <i :class="playClass+' '+iconClass" @click="togglePlay"></i>
                    </div>
                    <div class="icon i-right">
                        <i class="icon-next" :class="iconClass" @click="next"></i>
                    </div>
                    <div class="icon i-right">
                        <i :class="favoriteIcon" @click="toggleFavorite"></i>
                    </div>
                </div>
            </div>
       </div>
        <!-- mini-player 部分 -->
        <mini-player></mini-player>
        <!-- 播放器标签 -->
        <audio
            ref="audioRef"
            @pause="pause"
            @canplay="ready"
            @error="error"
        ></audio>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref, onMounted } from 'vue'
import HeaderTitle from '@/components/base/header-title/index.vue'
import MiniPlayer from '@/components/mini-player/index.vue'
import { useStore } from 'vuex'
import { StateProp, SongDetailProp } from '@/store/type'
import useMode from './useMode'
import useFavorite from './useFavorite'

export default defineComponent({
    components: {
        HeaderTitle,
        MiniPlayer
    },
    setup () {
        const store = useStore<StateProp>()
        // data
        const audioRef = ref<HTMLMediaElement | null>(null) // audio播放器实例
        const songReady = ref<boolean>(true) // 歌曲是否可以进行播放了
        // vuex
        const playing = computed<boolean>(() => store.state.playingState) // 是否正在播放
        const playList = computed<SongDetailProp[]>(() => store.state.playList) // 播放列表
        const currentIndex = computed<number>(() => store.state.currentIndex) // 当前播放的歌曲索引
        const fullScreen = computed<boolean>(() => store.state.fullScreen)
        const currentSong = computed<SongDetailProp>(() => {
            return store.getters.playingSong
        })
        // computed
        const playClass = computed<string>(() => playing.value ? 'icon-pause' : 'icon-play') // 通过播放状态计算出播放按钮的图标类
        const iconClass = computed<string>(() => songReady.value ? '' : 'disabled') // 通过播放状态计算出播放按钮的图标类
        // hooks
        const { modeClass, changeMode } = useMode()
        const { favoriteIcon, toggleFavorite } = useFavorite(currentSong)
        onMounted(() => {
            const audio = audioRef.value
            if (audio !== null) {
                audio.src = currentSong.value.url
                store.commit('setPlayingState', false)
            }
        })
        watch(currentSong, newSong => {
            if (!newSong.id && !newSong.url) return false
            if (audioRef.value === null) return false
            songReady.value = false
            audioRef.value.src = newSong.url
            audioRef.value.play()
            store.commit('setPlayingState', true)
        })
        watch(playing, newVal => {
            if (!songReady.value) return false // 没有加载完成，不允许播放、暂停
            if (newVal) {
               audioRef.value && audioRef.value.play()
            } else {
                audioRef.value && audioRef.value.pause()
            }
        })
        // 点击关闭全屏按钮
        const action = () => {
            store.commit('setFullScreen', false)
        }
        // 切换播放状态
        const togglePlay = () => {
            store.commit('setPlayingState', !playing.value)
        }
        // 监听暂停状态
        const pause = () => {
            store.commit('setPlayingState', false)
        }
        // 单曲循环播放
        const loop = () => {
            const audio = audioRef.value
            if (audio !== null) {
                audio.currentTime = 0 // 开始时间设置为0
                audio.play()
            }
        }
        // 上一首歌曲
        const prev = () => {
            const list = playList.value
            if (!songReady.value) return false
            if (!list.length) return false
            if (list.length === 1) {
                return loop() // 当列表中只有一首歌曲的时候，循环播放
            }
            let index = currentIndex.value - 1
            index = index < 0 ? (list.length - 1) : index
            console.log('prev', index)
            store.commit('setCurrentIndex', index) // 当前索引设置到store中
            store.commit('setPlayingState', true) // 播放状态设置为true
        }

        // 下一首歌曲
        const next = () => {
            const list = playList.value
            if (!songReady.value) return false
            if (!list.length) return false
            if (list.length === 1) {
                return loop() // 当列表中只有一首歌曲的时候，循环播放
            }
            let index = currentIndex.value + 1
            index = index >= list.length ? 0 : index
            console.log('next', index)
            store.commit('setCurrentIndex', index) // 当前索引设置到store中
            store.commit('setPlayingState', true) // 播放状态设置为true
        }
        const ready = () => {
            console.log('ready')
            songReady.value = true
        }
        // 错误的时候，默认加载成功
        const error = () => {
            songReady.value = true
        }
        return {
            audioRef,
            fullScreen,
            currentSong,
            action,
            playClass,
            togglePlay,
            pause,
            prev,
            next,
            ready,
            iconClass,
            error,
            // mode hook
            modeClass,
            changeMode,
            ...{ // favorite hooks
                favoriteIcon,
                toggleFavorite
            }
        }
    }
})
</script>

<style lang="scss">
.player {
    .normal-player {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 150px;
        background-color: #222;
        .background {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            filter: blur(25px);
            img {
                width: 100%;
                height: 100%;
                object-fit: fill;
            }
        }
        .header-box {
            i {
                transform: rotate(-90deg);
                display: inline-block;
            }
            .header-title {
                color: #fff;
            }
        }
        .subtitle {
            margin-top: 40px;
            text-align: center;
        }
        .middle {
            position: absolute;
            top: 80px;
            bottom: 170px;
            width: 100%;
            font-size: 0;
            white-space: nowrap;
            [class^="middle-"] {
                display: inline-block;
                width: 100%;
            }
            .middle-l {
                height: 0;
                padding-top: 80%;
                font-size: 14px;
                position: relative;
                .cd-wrapper {
                    position: absolute;
                    width: 80%;
                    height: 100%;
                    left: 10%;
                    top: 0;
                    transform-origin: center;
                    animation: RotateAnimate 20s infinite linear;
                    .cd {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        overflow: hidden;
                        border: 10px solid hsla(0,0%,100%,.1);
                        box-sizing: border-box;
                        .image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .playing-lyric-wrapper {
                    margin-top: 30px;
                    .playing-lyric {
                        margin: 0 auto;
                        width: 80%;
                        color: hsla(0,0%,100%,.5);
                        text-align: center;
                    }
                }
            }
            .middle-r {
                height: 100%;
                .lyric-wrapper {
                    .text {
                        line-height: 32px;
                        font-size: 14px;
                        color: hsla(0,0%,100%,.5);
                        text-align: center;
                    }
                }
            }
        }
        .bottom {
            position: absolute;
            left: 0;
            bottom: 50px;
            right: 0;
            .dot-wrapper {
                text-align: center;
                .dot {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 8px;
                    background-color: rgba(255, 255, 255, 0.5);
                    &:first-child {
                        margin-right: 8px;
                    }
                    &.active {
                        width: 20px;
                        background: rgba(255, 255, 255, 0.8);
                    }
                }
            }
        }
        .progress-wrapper {
            width: 80%;
            margin: 0 auto;
            display: flex;
            padding: 10px 0;
            .time {
                color: #fff;
                font-size: 12px;
                flex: 0 0 40px;
                line-height: 30px;
                width: 40px;
                &.time-l {
                    text-align: left;
                }
                &.time-r {
                    text-align: right;
                }
            }
            .progress-bar-wrapper {
                flex: 1;
                .progress-bar {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    .bar-inner {
                        width: 100%;
                        height: 4px;
                        background: rgba(0,0,0,.3);
                        position: relative;
                        top: -4px;
                        .progress {
                            position: absolute;
                            background: #ffcd32;
                            height: 100%;
                        }
                        .progress-btn-wrapper {
                            position: absolute;
                            padding: 6px;
                            top: -12px;
                            left: -7px;
                            .progress-btn {
                                width: 9px;
                                height: 9px;
                                border-radius: 15px;
                                border: 4px solid #fff;
                                background-color: #ffcd32;
                            }
                        }
                    }
                }
            }
        }
        .operators {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            .icon {
                flex: 1;
                font-size: 30px;
                color: #ffcd32;
                &.i-right {
                    text-align: left;
                }
                &.i-left {
                    text-align: right;
                }
                &.i-center {
                    text-align: center;
                    padding: 0 15px;
                    font-size: 40px;
                }
                .disabled {
                    color: rgba(255, 205, 50, .3) !important;
                }
                .icon-favorite {
                    color: #ff0000;
                }
            }
        }
    }
}

@keyframes RotateAnimate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
